<template>
	<view class="bgDefault">
		<tn-nav-bar >导师申请</tn-nav-bar>
		<view class="mentorApply" :style="{paddingTop: vuex_custom_bar_height+ 'px'}">
			
			<view class="form">
				<tn-form :model="model" ref="form" :errorType="errorType" :labelPosition="labelPosition" :labelWidth="labelWidth" :labelAlign="labelAlign">
				  <tn-form-item label="导师名" prop="nickname"  :required="true" :labelPosition="labelPosition" :labelAlign="labelAlign">
				    <tn-input v-model="model.nickname" type="text" placeholder="请输入导师名" :border="border" :clearable="false"></tn-input>
				  </tn-form-item>
				  <tn-form-item label="英文名" prop="enname"  :required="true" :labelPosition="labelPosition" :labelAlign="labelAlign">
				    <tn-input v-model="model.enname" type="text" placeholder="请输入导师英文名" :border="border" :clearable="false"></tn-input>
				  </tn-form-item>
				  <tn-form-item label="性别" prop="sex"  :required="true" :labelPosition="labelPosition" :labelAlign="labelAlign">
				    <tn-input v-model="model.sex" type="select" placeholder="请选择性别" :border="border" :selectOpen="actionSheetShow" @click="actionSheetShow = true"></tn-input>
				  </tn-form-item>
				  <tn-form-item label="手机号码"  :required="true" prop="mobile" rightIcon="phone" :labelPosition="labelPosition" :labelAlign="labelAlign">
				    <tn-input v-model="model.mobile" type="number" placeholder="请输入手机号码" :border="border" :clearable="false"></tn-input>
				  </tn-form-item>
				  <tn-form-item label="介绍"  :required="true" prop="intro" :labelPosition="labelPosition" :labelAlign="labelAlign">
				    <tn-input v-model="model.intro" type="textarea" placeholder="请输入介绍" :border="border" :clearable="false"></tn-input>
				  </tn-form-item>
				
				  <tn-form-item label="选择分类"  :required="true" prop="cate_name" :labelPosition="labelPosition" :labelAlign="labelAlign">
				    <tn-input v-model="model.cate_name" type="select" placeholder="请选择分类" :border="border" :selectOpen="selectShow" @click="selectShow = true"></tn-input>
				  </tn-form-item>
				  
				  <tn-form-item label="选择标签"  :required="true" prop="labelArray" :labelPosition="labelPosition" :labelAlign="labelAlign">
				    <tn-checkbox-group v-model="model.labelArray" :width="checkboxWidth" :wrap="checkboxWrap" @change="checkboxGroupChange">
				      <tn-checkbox v-for="(item, index) in checkboxList" :key="index" :name="item.label" :disabled="item.disabled">{{ item.label }}</tn-checkbox>
				    </tn-checkbox-group>
				  </tn-form-item>
				  
				  <tn-form-item label="所属公司" prop="company"  :labelPosition="labelPosition" :labelAlign="labelAlign">
				    <tn-input v-model="model.company" type="text" placeholder="请输入所属公司" :border="border" :clearable="false"></tn-input>
				  </tn-form-item>
				
				  <tn-form-item label="上传证书" prop="file" :labelPosition="labelPosition" :labelAlign="labelAlign">
				    <tn-image-upload
					 uploadText="选择文件"
					 :fileList="fileList"
					 :action="uploadUrl"
					 :maxCount="maxCount"
					 :maxSize="10 * 1024 * 1024"
					 name="image"
					 @on-list-change="imageUploadChange" 
					 @on-success="uploadSuccess"
					>
						
					</tn-image-upload>
				  </tn-form-item>
				</tn-form>
			
				<tn-button backgroundColor="#FF6708" :disabled="disabled" fontColor="#FFFFFF" width="100%" @click="submit">提交</tn-button>
			</view>
		</view>
		
		<!-- 性别选项 -->
		<tn-action-sheet  v-model="actionSheetShow" :list="actionSheetList" @click="actionSheetClick"></tn-action-sheet>
		
		<tn-select v-model="selectShow" mode="single" labelName="name" valueName="id" :list="selectList" @confirm="cateSelectConfirm"></tn-select>
		
		<TemplateLoading :active="loading"></TemplateLoading>
	</view>
</template>

<script>
	import {mentorCate,mentorLabel,addMentor,mentorOne} from '@/api/mentor/index.js'
	import {uploadUrl} from '@/api/user/login.js'
	import TemplateLoading from '../../components/loading.vue'
	export default {
		components:{TemplateLoading},
		data() {
			return {
				uploadUrl:uploadUrl,
				fileList:[],
				loading:false,
				maxCount:3,
				model:{
					nickname:"",
					enname:"",
					sex:"",
					mobile:"",
					intro:"",
					labelArray:[],
					labels:"",
					cate_id:"",
					cate_name:"",
					file:"",
					company:""
				},
				labels:[],
				cate_name:"",
				errorType: ['message','border-bottom','toast'],
				labelPosition: 'left',
				labelAlign: 'right',
				border: false,
				disabled:false,
				checkboxWrap: false,
				actionSheetShow: false,
				selectShow: false,
				labelWidth: 160,
				selectList:[],
				checkboxList:[],
				actionSheetList:[
				  {
				    text: '男'
				  },
				  {
				    text: '女'
				  },
				  {
				    text: '保密'
				  }
				],
				rules: {
				  nickname: [
				    {
				      required: true,
				      message: '请输入用户名',
				      trigger: 'blur'
				    },
				    {
				    	min: 3,
				    	max: 5,
				    	message: '姓名长度在3到5个字符',
				    	trigger: ['change','blur'],
				    },
				    {
				    	// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
				    	validator: (rule, value, callback) => {
				    		return this.$tn.test.chinese(value);
				    	},
				    	message: '姓名必须为中文',
				    	// 触发器可以同时用blur和change，二者之间用英文逗号隔开
				    	trigger: ['change','blur'],
				    },
				    {
				    	// 异步验证需要通过调用callback()，并且在里面抛出new Error()
				    	// 抛出的内容为需要提示的信息，和其他方式的message属性的提示一样
				    	asyncValidator: (rule, value, callback) => {
				        if (value === '图鸟11122111') {
				          callback(new Error('姓名重复'));
				        } else {
				          // 没有错误，也要执行callback()回调
				          callback();
				        }
				    	},
				      trigger: ['blur'],
				    }
				  ],
				  enname: [
				  	{
				  		required: true,
				  		message: '请填写英文名字',
				  		trigger: ['blur']
				  	}
				  ],
				  sex: [
				  	{
				  		required: true,
				  		message: '请选择性别',
				  		trigger: 'change'
				  	}
				  ],
				  mobile: [
				  	{
				  		required: true,
				  		message: '请输入手机号码',
				  		trigger: ['blur']
				  	}
				  ],
				  intro: [
				    {
				      min: 5,
				      message: '简介不能少于5个字',
				      trigger: 'change'
				    },
				    {
				      // 正则表达式验证演示
				      pattern: /^[\u4e00-\u9fa5]+$/gi,
				      message: '简介只能包含中文',
				      trigger: 'change'
				    }
				  ],
				 cate_name: [
				   {
				     required: true,
				     message: '请选择分类',
				     trigger: 'change'
				   }
				 ],
				 
				 labelArray: [
				   {
				     required: true,
				     message: '请选择标签',
				     trigger: 'change',
				     type: 'array'
				   }
				 ]
				}
			}
		},
		onLoad() {
			this.initData()
		},
		onReady() {
		  this.$refs.form.setRules(this.rules)
		},
		methods: {
			initData(){
				mentorCate({page:1,size:100}).then(res=>{
					this.selectList = res.data
				})
				mentorLabel({page:1,size:100}).then(res=>{
					this.checkboxList = res.data
				})
				
				this.loading = true
				mentorOne().then(res=>{
					this.loading = false
					if(res.labelArray.length >0){
						this.model = res
					}
					
					if(res.file){
						var files = res.file.split(",")
						files.map(re=>{
							this.fileList.push({url:re})
						})
					}
					
					if(res.status == 0){
						this.disabled = true
						
						uni.showToast({
							icon: 'none',
							duration:3000,
							title: '客户正在审核中，请稍后再试！',
						})
						
					}else if(res.status == 1){
						this.disabled = true
						
						uni.showToast({
							icon: 'none',
							duration:3000,
							title: '资料已审核通过！',
						})
					}else{
						uni.showModal({
							title:"审核失败消息",
							content:res.reason
						})
					}
				}, err=>{
					this.loading = false
				})
			},
			// 点击actionSheet选择性别
			actionSheetClick(index) {
			  uni.hideKeyboard()
			  this.model.sex = this.actionSheetList[index].text
			},
			
			// 图片有修改
			imageUploadChange(lists) {
			  this.fileList = lists
			},
			// 同意协议状态修改
			agreementCheckChange(event) {
			  this.model.agreement = event.value
			},
			cateSelectConfirm(res){
				this.model.cate_name = res[0].label
				this.model.cate_id = res[0].value
			},
			checkboxGroupChange(event) {
			  this.model.labelArray = event
			  
			  var _ids = [];
			  this.checkboxList.map(re=>{
				  if(this.model.labelArray.includes(re.label)){
					  _ids.push(re.id)
				  }
			  })
			  this.model.labels = _ids.join(",")
			},
			sleep(ms) {
			  return new Promise(resolve => setTimeout(resolve, ms));
			},
			submit() {
			  this.$refs.form.validate(valid => {
				  
			    if (valid) {
					var _image = [];
					var _list = this.fileList;
					for(var i=0;i<_list.length;i++){
						if(typeof _list[i].uploadTask != 'undefined' && (typeof _list[i].response == 'undefined' || typeof _list[i].response.code == 'undefined')){
							uni.showToast({
								icon: 'none',
								title: '文件提交中！'
							})
							console.log("开始重试")
							this.subForm()
							return;
						}
						
						if(_list[i].progress == 100){
							if(_list[i].response){
								if(_list[i].response.code == 200){
									_image.push(_list[i].response.data.url)
								}
							}else{
								_image.push(_list[i].url)
							}
						}
					}
					this.model.file = _image.join(",")
					
					this.loading = true
					addMentor(this.model).then(res=>{
						this.loading = false
						uni.showToast({
							icon: 'none',
							title: '申请已提交！'
						})
					},err=>{
						this.loading = false
					})
					
			    } else {
			      // 验证失败
				  console.log(this.model)
				  console.log("#####################")
			    }
			  })
			},
			uploadSuccess(data, currentIndex, lists, index) {
			  console.log('文件上传成功', data, currentIndex, lists, index);
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.bgDefault{
		background: $tn-main-bg;
		min-height: 100vh;
	}
  .mentorApply{
	 // background: $tn-main-bg;
	  height: 100vh;
	  padding-left: 6%;
	  padding-right: 6%;
  }
  
  .tn-radius10{border-radius: 10rpx;}

</style>
